<template>
  <div class="main">
    <div class="info-detail-wrapper">
      <header-back @btnclick="shareOpen" v-if="showBackArrow">
        <img class="my-right" slot="my-right" src="~@/static/images/shareBlack.png" alt="" />
      </header-back>
      <scroller ref="scrollerBottom">
        <div v-show="showPage">
          <div style="height:0.88rem" v-if="showBackArrow"></div>
          <div id="info-detail-box">
            <div class="header">
              <span class="spn1">
                <b>{{ headerTitle }}</b>
              </span>
              <span class="spn2">
                <img class="icons" src="~/static/images/com_icon_view_gray_32.png" alt="" /><b>{{ viewCount }}</b>
                <!-- <i>{{ viewCount }}</i> -->
              </span>
            </div>
            <div v-html="dataDetail" class="vHtml" id="vHtml"></div>
          </div>
        </div>
      </scroller>
    </div>
  </div>
</template>

<script>
import { getConsultationDetail } from '~/api/identity'
import headerBack from '~/components/headerBack'
import ls from 'store2'
import { format } from '~/plugins/filter'
import { showShare } from '~/components/share/index'
import wxapi from '~/plugins/wxapi.js'
export default {
  components: {
    headerBack,
  },
  data() {
    return {
      showBackArrow: true,
      showComment: true,
      showPage: false,
      currentPage: 1,
      dataDetail: '',
      headerTitle: '',
      inTime: '',
      viewCount: 0,
    }
  },
  created() {
    if (this.commonJs.GetUrlParam('shareInfo')) {
      this.showBackArrow = false
    }
  },
  mounted: function() {
    this.$visit('consultationDetail/' + this.$route.query.ype)
    wxapi.wxRegister()
    this.showDetails()
  },
  destroyed() {},
  methods: {
    wxShare(pic, titles, descs, id) {
      let uri = window.location.href + '&shareInfo=' + true

      let option = {
        title: titles,
        desc: descs,
        link: uri,
        imgUrl: pic,
      }
      wxapi.ShareAppMessage(option)
      wxapi.ShareTimeline(option)
    },
    shareOpen() {
      showShare('open')
    },
    showDetails(id) {
      this.$loading('open')
      getConsultationDetail(this.$route.query.id)
        .then((res) => {
          if (res.code === '0') {
            this.dataDetail = res.data.content
            this.inTime = res.data.createTime
            this.headerTitle = res.data.title
            this.viewCount = res.data.views
          }
          this.wxShare(res.data.imgUrl, res.data.title, '')
        })
        .finally((error) => {
          this.showPage = true
          this.$hideLoading()
        })
    },
  },
}
</script>

<style scoped lang="less">
._v-container {
  width: 100%;
  height: 100vh;
}

.main {
  width: 100%;
  height: 100vh;
  font-size: 0.3rem;
}

.info-detail-wrapper {
  width: 7.5rem;
  height: 100vh;
  background: #fff;
  .my-right {
    width: 0.4rem;
    height: 0.4rem;
  }
}

#info-detail-box {
  background: #fff;
  box-sizing: border-box;
  width: 7.5rem;
  font-size: 0.3rem;
  margin: 0 auto;
  padding: 0rem 0.3rem 0.5rem;
  box-sizing: border-box;
  .header {
    width: 100%;
    height: auto;
    padding-bottom: 0.2rem;
    border-bottom: 1px solid #b7b7b7;
    margin-bottom: 0.1rem;

    b,
    i {
      font-style: normal;
      font-weight: 500;
    }

    .spn1 {
      display: block;
      width: 100%;
      box-sizing: border-box;

      b {
        font-size: 0.4rem;
        font-family: PingFangSC-Semibold, PingFangSC;
        font-weight: 600;
        color: rgba(34, 34, 34, 1);
        line-height: 0.6rem;
      }
    }

    .spn2 {
      height: 0.5rem;
      overflow: hidden;
      margin-top: 0.2rem;

      b,
      i {
        font-size: 0.28rem;
        color: #b7b7b7;
        display: inline-block;
      }
      .icons {
        vertical-align: middle;
      }
      i {
        vertical-align: middle;
        height: 0.5rem;

        margin-left: 0.08rem;
        line-height: 0.5rem;
      }
    }
  }

  .vHtml {
    width: 100%;
    height: auto;
    font-size: 0.3rem;
    /deep/ img {
      width: 100%;
    }
  }

  p {
    margin: 0 !important;
  }

  #vHtml {
    img {
      display: block;
      width: auto;
      max-width: 100% !important;
    }
  }
}

.icons {
  width: 0.32rem;
  height: 0.32rem;
  margin-right: 0.15rem;
}
</style>
